<template>
    <Page>
      <div slot="title">
        <div class="base-page-title" name="title">
          <top-hrader @back="$emit('back')" :back="back" :className="className" :theme="theme">
            <template slot="name">
              <img class="title-img" src="~assets/img/download_logo.png" alt="">
              <span>乐马国际会</span>
            </template>
            <template slot="right"><slot name="right"></slot></template>
          </top-hrader>
        </div>
      </div>
      <div class="inviter-wrap">
        <div class="inviter-title" v-if="form.relation_status == 1">
          <img src="~assets/img/success@2x.png" alt="" class="logo">
          <div class="txt">申请成功</div>
          <div class="name">等待管理员审核</div>
        </div>
        <div class="inviter-title" v-else-if="form.relation_status == 0">
          <img src="~assets/img/success@2x.png" alt="" class="logo">
          <div class="txt">您已存在该组织中</div>
        </div>
        <div class="inviter-title inviter-info" v-else>
          <div class="txt pname">尊敬的{{form.nickname}}会员：</div>
          <div class="txt tip">恭喜您成为我们乐马国际会的会员，我们为您申请
              了专属户口号-{{form.code}}。同时您也提交申请成为{{form.invite_name}}的{{form.invite_manager}}，等待审核。</div>
        </div>
        <div class="inviter-con">
          <a class="btn btn-block btn-primary submit" @click="submit($event)">立即登录</a>
          <p class="tip-msg" v-if="form.relation_status == 1">温馨提示：审核通过后将会短信通知您</p>
        </div>
      </div>
  </Page>
  </template>

  <script>
  import topHrader from '~/components/common/header.vue'
  import Page from '~/components/page';
  import Input from '~/components/Input'

  export default {
    components: {
      topHrader,
      Page,
    },
    async asyncData({ route }){
      return route.params;
    },
    data(){
      return {
        name:'邀请人',
        success: false,
        form:{
        }
      }
    },
    props: {
      back:{ // 如果为true ,则处触发back事件，具体处理逻辑再调用页面处理
        type:Boolean,
        default:false,
      },
      className: {
        default:1
      },
      theme: {
        default:''
      },
    },
    computed: {
    },
    mounted () {
      // 页面刷新时，取缓存localStorage
      this.form = this.form.code ? this.form : JSON.parse(localStorage.getItem('invite'))
    },
    methods: {
      async submit () {
        this.posting = true;
        // 有token登录
        let url = '?ct=api&ac=select_member';
        if(this.form.isregister) {
          url = '?ct=member&ac=token_login'
        }
        this.form.action = 'invite_register';
        let { data } = await this.$axios.post(url, this.form);
        if(data.code == 0){
          this.posting = false;
          const res = data.data;
          if(res.is_need_reset_pwd == 1){ //第一次登录需要重置密码
            sessionStorage.setItem('recheck_user',JSON.stringify(res));
            this.$router.push({name:'login-password'});
          }else{
            // 缓冲登录token，uid
            this.$store.commit("SET_UID",res.uid);
            this.$store.commit("SET_TOKEN",res.token);
            if(res.select_member == 1){ // 需要切换身份
              this.$router.push({name:'login-list',params:{list:res.group_labels,token:res.token}})
            }else {
              // 正常登录成功
              this.$store.commit("SET_USER",res);
              if(this.$tools.isLema){
                this.$router.replace('/');
              }else{
                window.location = "lema://account/"+res.uid+"/"+res.token;
                setTimeout(()=> {
                  this.$router.replace('/');
                },2000)
              }
            }
          }
        }else{
          this.$toast(data.msg);
          this.posting = false;
        }
      },
    }
  }
  </script>

  <style lang="less" scoped>
  .header {
    span{
      vertical-align: middle;
    }

    .title-img {
      margin-right: 19px;
      display: inline-block;
      width: 48px;
      height: 48px;
      vertical-align: middle;
    }
  }


  .inviter-wrap {
    padding: 0 30px 200px;
    background: #fff;

    .inviter-title {
      text-align: center;

      .logo {
        margin: 100px 0 30px;
        width: 110px;
        height: 110px;
      }

      .txt {
        line-height: 1;
        font-size: 36px;
      }

      .name {
        margin-top: 30px;
        color: #d39b00;
        font-size: 30px;
      }

      .pname {
        margin-top: 0;
        padding: 70px 0 50px;
        font-size: 36px;
        line-height: 1;
        text-align: left;
      }

      .tip {
        margin-bottom: 300px;
        font-size: 30px;
        color: #666;
        line-height: 52px;
      }
    }

    .tip-msg {
      margin-top: 30px;
      color: #999;
      text-align: center;
      font-size: 24px;
    }

    .submit {
      margin-top: 190px;
    }
  }
  </style>
